<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/javaweb17/back/element-ui/lib/theme-chalk/index.css">
    <style>
        *{
            /*清除默认样式*/
            padding: 0;
            margin: 0;
        }
        body{
            background-image: url(back/imgs/backag.jpeg);
            background-repeat: no-repeat;
            background-size: 100% 720px;
        }
        #login{
            display: flex;/*将盒子设置为弹性盒*/

            /*设置弹性盒中的元素的对齐方式 */
            justify-content: center;

            /*侧轴对齐*/
            align-items: center;

            /*对于没有设置过高度宽度的盒子 需要下方代码才能垂直居中*/
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .login{
            width: 700px;
            height: 500px;
            background-color: rgba(7, 5, 5, 0.8);
            /*margin: 0 auto;*/
            display: flex;
            justify-content: center;
            align-items: center;
            /*text-align: center;*/
            border-radius: 40px;
            box-shadow: 10px 10px 10px rgba(7, 5, 5, 0.6) ;
        }
    </style>
</head>
<body>
<div id="login">
    <!--定义存储登录组件的盒子-->
    <div class="login" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-form ref="fuleForm" :rules="rules" :model="form" label-width="80px"  >
            <el-form-item label="用户名" prop="username"  style="width: 500px">
                <el-input v-model="form.username" placeholder="请输入用户名..." autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password"  style="width: 500px">
                <el-input show-password v-model="form.password" placeholder="请输入密码..." autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('fuleForm')">立即登录</el-button>
                <el-button type="danger" @click="clear('fuleForm')">清空数据</el-button>
            </el-form-item>
        </el-form>
    </div>


</div>
</body>
</html>
<script src="/javaweb17/back/js/vue.js"></script>
<script src="/javaweb17/back/element-ui/lib/index.js"></script>
<script src="/javaweb17/back/js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:'#login',
        data(){
            return{
                /*表单数据*/
                form: {
                    username:'',
                    password:''
                },
                loading:false,
                //定义表单验证的规则
                rules:{
                    //指定需要验证的属性和规则 多条规则
                    username:[
                        /*第一条规则 required 必填  message 提示消息 ritgger 什么时机触发*/
                        { required: true, message: '用户名不能为空', trigger: 'blur' },
                        /*第二条规则*/
                        { min: 2, max: 5, message: '用户名长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]

                }

            }
        },
        methods: {
            onSubmit(formName) {
                //表单验证通过后提交
                //通过Vue对象来使用ref属性获取表单对象
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        this.loading=true;
                        //通过验证了 发送数据到服务器验证登录并返回结果
                        //判断登录的结果
                        axios({
                            method:'post',
                            url:'http://localhost:8080/javaweb17/student/login',
                            data:this.form
                        }).then(resp => {
                            console.log(resp.data);
                            //根据后台响应的结果判断显示
                            if(resp.data == '-1'){
                                //用户名不存在
                                this.loading = false;
                                this.$message.error('用户名不存在，请重试！');
                                return false;
                            }

                            if(resp.data == '-2'){
                                //密码错误
                                this.loading = false;
                                this.$message.error('用户密码错误，请重试！');
                                return false;
                            }

                            //以上判断都没有问题证明是成功的
                            //可以将登录成功后的信息存储起来方便在后面的页面中使用
                            localStorage.setItem("loginStudent",resp.data);
                            // sessionStorage.setItem()

                            location.href="http://localhost:8080/javaweb17/back/index.html"

                        });





                    }else{
                        //信息错误
                        return false;
                    }

                })
            },
            //清空表单
            clear(formName){
                // this.form={};
                //获取所有表单清空所有属性
                this.$refs[formName].resetFields();
            }
        }

    });
</script>
